<ui:composition template="/WEB-INF/templates/showcase.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:o="http://omnifaces.org/ui"
>
	<ui:define name="description">
		<p>
			The <code>org.omnifaces.eventlistener.ResetInputAjaxActionListener</code> will reset input fields which are not 
			executed during ajax submit, but which are rendered/updated during ajax response. This will prevent those
			input fields to remain in an invalidated state because of a validation failure during a previous request.
			This is very useful for cases where you need to update one form from another form by for example a modal
			dialog, or when you need a cancel/clear button. For a more detailed explanation, check 
			<a href="http://stackoverflow.com/a/6845800/157882">this Stack Overflow answer</a>)
		</p>
		<p>
			Register it as <code>&lt;phase-listener&gt;</code> in <code>faces-config.xml</code>. It'll be applied
			to <strong>every single</strong> ajax action throughout the webapp, on both <code>UIInput</code> and
			<code>UICommand</code> components.
		</p>
		<pre class="prettyprint"><code class="lang-xml">
&lt;lifecycle&gt;
    &lt;phase-listener&gt;org.omnifaces.eventlistener.ResetInputAjaxActionListener&lt;/phase-listener&gt;
&lt;/lifecycle&gt;
		</code></pre>
		<p>
			<i>Or</i> register it as <code>&lt;action-listener&gt;</code> in <code>faces-config.xml</code>. It'll
			<strong>only</strong> be applied to ajax actions which are invoked by an <code>UICommand</code> component such as
			<code>&lt;h:commandButton&gt;</code> and <code>&lt;h:commandLink&gt;</code>.
		</p>
		<pre class="prettyprint"><code class="lang-xml">
&lt;application&gt;
    &lt;action-listener&gt;org.omnifaces.eventlistener.ResetInputAjaxActionListener&lt;/action-listener&gt;
&lt;/application&gt;
		</code></pre>
		<p>
			<i>Or</i> register it as <code>&lt;f:actionListener&gt;</code> on the invidivual <code>UICommand</code>
			components where this action listener is absolutely necessary to solve the concrete problem. Note that it isn't
			possible to register it on the individual <code>UIInput</code> components using the standard JSF tags.
		</p>
		<pre class="prettyprint"><code class="lang-xml">
&lt;h:commandButton value="Update" action="\#{bean.updateOtherInputs}"&gt;
    &lt;f:ajax execute="currentInputs" render="otherInputs" /&gt;
    &lt;f:actionListener type="org.omnifaces.eventlistener.ResetInputAjaxActionListener" /&gt;
&lt;/h:commandButton&gt;
		</code></pre>
		<p>
			Note that PrimeFaces has implemented the same idea later in its new version 3.4 
			<a href="http://www.primefaces.org/showcase/ui/resetInput.jsf"><code>&lt;p:resetInput&gt;</code></a>,
			so if you happen to use PrimeFaces already and want to apply it on specific command buttons only, then you 
			may want to use it instead.
		</p>
 	</ui:define>		

	<ui:define name="demo">
		<h3>Form without <code>ResetInputAjaxActionListener</code></h3>
		<h:form id="form1">
			<p>input1: Enter something (but don't enter "Updated!").</p>
			<p>
				<h:inputText id="input1" value="#{resetInputBean.input1}" required="true" />
				<h:message for="input1" />
			</p>
			<p>input2: Leave this field empty or enter a non-numeric value to cause a validation failure.</p>
			<p>
				<h:inputText id="input2" value="#{resetInputBean.input2}" required="true" />
				<h:message for="input2" />
			</p>
			<p>Press "submit" and then "update". The "update" simulates changing model values externally.</p>
			<p>
				<h:commandButton value="Submit">
					<f:ajax execute="@form" render="@form" />
				</h:commandButton>
				<h:commandButton value="Update" action="#{resetInputBean.update}" >
					<f:ajax execute="@this" render="@form" />
				</h:commandButton>
				<h:outputText value="OK!" rendered="#{facesContext.postback and not facesContext.validationFailed}" />
			</p>
			<p><b>Problem</b>: input1 is not updated with text "Updated!".</p>
		</h:form>

		<hr />
		
		<h3>Same form, with <code>ResetInputAjaxActionListener</code> on "update"</h3>
		<h:form id="form2">
			<p>input1: Enter something (but don't enter "Updated!").</p>
			<p>
				<h:inputText id="input1" value="#{resetInputBean.input1}" required="true" />
				<h:message for="input1" />
			</p>
			<p>input2: Leave this field empty or enter a non-numeric value to cause a validation failure.</p>
			<p>
				<h:inputText id="input2" value="#{resetInputBean.input2}" required="true" />
				<h:message for="input2" />
			</p>
			<p>Press "submit" and then "update". The "update" simulates changing model values externally.</p>
			<p>
				<h:commandButton value="Submit">
					<f:ajax execute="@form" render="@form" />
				</h:commandButton>
				<h:commandButton value="Update" action="#{resetInputBean.update}" >
					<f:ajax execute="@this" render="@form" />
					<f:actionListener type="org.omnifaces.eventlistener.ResetInputAjaxActionListener" />
				</h:commandButton>
				<h:outputText value="OK!" rendered="#{facesContext.postback and not facesContext.validationFailed}" />
			</p>
			<p><b>Solved</b>: input1 is now updated with text "Updated!".</p>
		</h:form>
	</ui:define>		
</ui:composition>